<template>
<div>

<el-row>
	<el-alert
	    title="预定须知请尽量详细填写，产品详情中的第一段文字将作为分享链接的描述信息。"
	    type="info"
	    :closable="false">
	</el-alert>
</el-row>

<el-form ref="form" class="mt10" label-width="180px">

	  <el-form-item label="预订须知：" prop="name" >
	    <el-input
		  type="textarea"
		  style="width:400px;"
		  :autosize="{ minRows: 5, maxRows: 20 }"
		  placeholder="请输入内容"
		  v-model="productDetail.bookingnotes">
		</el-input>
	  </el-form-item>

	  <el-form-item label="产品详情：" >
	  		<div v-for="(detail, index) in details">
		    	<el-input v-if="detail.type == 'text'"
				  type="textarea"
				  style="width:400px;"
				  autosize
				  class="mt10"
				  v-model="detail.value">
				</el-input>

				<img v-if="detail.type == 'image'" 
				width="400" :src="detail.value" class="mt10" >

				<el-button-group>
				  <el-button type="primary" size="mini" icon="el-icon-caret-top"
				  v-if="index != 0"
				  @click="detailUp(index)"
				  ></el-button>
				  <el-button type="primary" size="mini" icon="el-icon-caret-bottom"
				  v-if="index != details.length - 1"
				  @click="detailDown(index)"
				  ></el-button>
				  <el-button type="primary" size="mini" icon="el-icon-delete"
				  @click="detailDel(index)"
				  ></el-button>
				</el-button-group>
			</div>
	  </el-form-item>


	  	<el-form-item label="请选择：" >
		  	<el-form :inline="true">
		  	<el-form-item >
		  		<el-select v-model="detailType" placeholder="请选择">	
				    <el-option
				      v-for="item in options"
				      @click.native="chooseDetailType"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
			</el-form-item>
			<el-form-item v-if="detailType == '2'" >
				<el-upload
				  :action="URL.upload"
				  :data="para"
				  :multiple="true"
				  :show-file-list="false"
				  :before-upload="beforeAvatarUpload"
				  :on-success="handleAvatarSuccess">
				  <el-button size="small" type="primary">点击上传</el-button>
				</el-upload>
			</el-form-item>
			</el-form>
	  	</el-form-item>

	  <el-form-item>
	    <el-button type="primary" size="medium" @click="onSubmit('form')">确认修改</el-button>
	  </el-form-item>
	  
</el-form>


<el-dialog
  title="添加详情文字"
  :visible.sync="detailTypeTextVisible"
  width="60%">
  	<el-input
	  type="textarea"
	  :autosize="{ minRows: 5, maxRows: 20 }"
	  placeholder="请输入内容"
	  v-model="detaileText">
	</el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="detailTypeTextVisible = false">取 消</el-button>
    <el-button type="primary" @click="addText()">确 定</el-button>
  </span>
</el-dialog>

<el-dialog
  title="添加详情文字"
  :visible.sync="detailTypeImageVisible"
  width="60%">

  <span slot="footer" class="dialog-footer">
    <el-button @click="detailTypeTextVisible = false">取 消</el-button>
    <el-button type="primary" @click="addText()">确 定</el-button>
  </span>
</el-dialog>


</div>		
</template>

<script>

import { mapGetters } from 'vuex';

export default {
	name: 'productText',
	data () {
		return {
		  	detailarr : [],

		  	detailType : '1',

		  	options: [
			  	{
		          value: '1',
		          label: '文字'
		        }, {
		          value: '2',
		          label: '图片'
		        }
	        ],

	        detailTypeTextVisible : false,

	        detailTypeImageVisible : false,

	        detaileText : '',

	        details : (() => {
	        	var d = [];
				try {
					d = JSON.parse(this.productDetail.detail);
				} catch (err) {
					
				}
				return d;
	        })(),
		}
	},

	props: {
	  	productDetail : Object,
	},

	components: {
		
	},

	computed : {
		...mapGetters([
			'userInfo',
			'URL',
			'common',
		]),

		para () {
			return {
				dir : this.userInfo.company_code + '/product/' + this.productDetail.code + '/',
			}
		},
	},

	methods : {
		onSubmit () {

			var para = {
				id : this.productDetail.id,
				sale_code : this.productDetail.sale_code,
				bookingnotes : this.productDetail.bookingnotes,
				detail : JSON.stringify(this.details),
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '保存成功',
			          type: 'success'
			        });
				},
				err : res => {
					this.$notify({
			          title: '保存失败',
			          message: res,
			          type: 'error'
			        });
				}
			};

			console.log(para);
			this.$store.dispatch('updateProduct_text', para);
	    },

	    chooseDetailType () {
	    	console.log('chooseDetailType');

	    	if(this.detailType == '1'){
	    		this.detailTypeTextVisible = true;
	    	}
	    },

	    addText () {
	    	this.details.push({
	    		type : 'text',
	    		value : this.detaileText,
	    	});
	    	this.detaileText = '';
	    	this.detailTypeTextVisible = false;
	    },

	    beforeAvatarUpload (file) {
	        const isLtM = file.size / 1024 / 1024 < this.common.imgMaxSize;

	        if (!isLtM) {
	          this.$message.error('上传图片大小不能超过 ' + this.common.imgMaxSize + 'MB!');
	        }
	        return isLtM;
		},

	    handleAvatarSuccess (res, file) {
	        this.details.push({
	    		type : 'image',
	    		value : res.url,
	    	});
	    },

	    detailDel (index){
			this.details.splice(index, 1);
		},

		detailDown (index){
			this.details[index] = this.details.splice(index + 1, 1, this.details[index])[0];
		},

		detailUp (index){
			this.details[index] = this.details.splice(index - 1, 1, this.details[index])[0];
		},
	},

	watch:{
	    
	},

	mounted () {
		
		
	},

}
</script>

<style scoped>

</style>
